<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <title>视频学习</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2353733_71ibui9xvrb.css">
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/popup.css?v=2" />
    <script src="js/config.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/axios-config.js?v=4"></script>
    <script src="js/vue/vue.js"></script>
    <script src="js/component.js?v=78"></script>
    <script src="js/navbar-component.js?v=2"></script>
    <script src="js/vue/vue-router.js"></script>
    <script src="js/srt.js?v=7"></script>
    <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <style>
      body{
          -moz-user-select:none;/*火狐*/
          -webkit-user-select:none;/*webkit浏览器*/
          -ms-user-select:none;/*IE10*/
          -khtml-user-select:none;/*早期浏览器*/
          user-select:none;
      }
  </style>
    <style>
        #op{
          position:fixed;
          left:0;
          bottom:0;
          opacity: 0.5;
          z-index:99;
        }
        #wordscreen{
          
        }
    </style>
</head>
<body>
  <div id="app">
  <video 
    x5-playsinline="" 
    playsinline="" 
    x-webkit-airplay="allow" 
    style="object-fit:fill" 
    id="video" 

    preload="auto" 
    width="100%" 
    src="https://vjs.zencdn.net/v/oceans.mp4">
</video> 
<div id="op">

  <button style="padding:0.5rem;" @click="play()">播放</button>
  <button style="padding:0.5rem;" @click="pause()">暂停</button>
  <button style="padding:0.5rem" @click="fullscreen()">全屏</button>

</div>
<div id="wordscreen">
    <div style='position:absolute;left:0;width:100%;bottom:0;'>
      <div>这个就是字幕文字 文字啊文字</div>
      <div>hello world hello world </div>
    </div>
    
</div>
</div>
</body>
<script type="text/javascript">
    new Vue({
      el:"#app",
      data(){
        return {
          video:''
        }
      },
      created(){
      },
      methods:{
        fullscreen(){
          let video = document.getElementById("video");
          let height = this.getClientHeight()
          let width = this.getClientWidth()
          video.style.width = height + "px"
          video.style.height = width + "px"
          /*
            position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -301.5px;
    margin-top: -184.5px;
    transform: rotate(90deg);
          */
          video.style.position = "fixed"
          video.style.left = "50%"
          video.style.top = "50%"
          video.style.marginLeft = -(height / 2) + 'px'
          video.style.marginTop = -(width /2) + 'px'
          video.style.transform = "rotate(90deg)"

          let wordscreen = document.getElementById("wordscreen")
          wordscreen.style.width = height + 'px'
          wordscreen.style.height = width + 'px'
          wordscreen.style.position = "fixed"
          wordscreen.style.left = "50%"
          wordscreen.style.top = "50%"
          wordscreen.style.marginLeft = -(height / 2) + 'px'
          wordscreen.style.marginTop = -(width / 2) + 'px'
          wordscreen.style.color = 'white'
          wordscreen.style.textAlign = 'center'
          wordscreen.style.transform = "rotate(90deg)"

        },
        play(){
          document.getElementById("video").play()          
        },
        pause(){
          document.getElementById("video").pause()
        },
         getClientHeight()
        {
          var clientHeight=0;
          if(document.body.clientHeight&&document.documentElement.clientHeight)
          {
              var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
          }
          else
          {
              var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
          }
          return clientHeight;
        },
        getClientWidth(){
          return document.documentElement.clientWidth; 
        }
      }
    })
    
    
</script>
</html>